@import "../commen/reset";
@import  "../commen/commen";
/* 版心和通栏样式 */
.container-fluid{
	width: 100%;
}
.container{
	width: 1200px;
	margin: 0 auto;
}
.rename{
	display: none;
}
/* 顶部导航 */
.navigation{
	height: 36px;
	background: $nav_background;
	position:relative;
	z-index: 10;
	ul{
		li{
			float: left;
			margin-left: 23px;
			line-height: 36px;
			&:first-child{
				margin-left: 0;
			}
		
			a{
				font-size: 14px;
				color: $nav_color;
				@include a_hover_style;
				sup{
					width: 32px;
					height: 16px;
					line-height: 16px;
					border-radius: 0 0 5px 5px;
					background: #ff1c5c;
					font-size: 10px;
					color: $has_bg_color;
				}
			}
		}
	}
}/* end navgation */
.page_manu{
	$manu_border: 1px dashed #cccccc;
	clear: both;
	height: 155px;
	background: $nav_background;
	position: absolute;
	width: 100%;
	top:-118px;
	left:0;
	z-index: 5;
	ul{
		border-top:  $manu_border;
		position: relative;
		>li{
			border-left: $manu_border;
			float:left;
			.first{
				width: 281px;
				ol{
					margin-right: 23px;
				}
				@include pagemanu_li;
			}/* end first */
			.second{
				ol{
					margin-right: 82px;
				}
				@include pagemanu_li;
			}/* end second */
			&:first-child{
				border-left: 0;
			}
			&:last-child{
				border-width: 6px;
				border-style: solid;
				border-color: #ff0000 transparent transparent transparent; 
				position: absolute;
				right: 37px;
				top: 0;
			}
		}/* end li */
	}/* end ul */
}/* end page-manu */

 /* css logo */
.logo{
	height: 96px;
	padding-top: 32px;
	background: #FFFFFF;
	z-index: 10;
	.container{
		position: relative;
	}
	ul{
		.search{
			input[type="text"]{
				width: 400px;
				border-radius: 20px 0 0 20px;
				padding: 0 24px;
				@include input_style;
			}
			>a{ 
				width: 82px;
				padding-left: 40px;
				background: $border_color;
				border-radius: 0 20px 20px 0;
				color: $has_bg_color;
				@include input_style;
			}
		}/* end search */
		>li{
			float: left;
			margin-right: 130px;
			ol{
				height: 24px;
				line-height: 24px;
				margin-left: 16px;
				>li{
					float: left;
					margin-right: 18px;
					font-size: 14px;
					color: 676767;
					a{
						@include a_hover_style;
					}
				}
			}/* end ol */
			&:last-child{
				height: 160px;
				width: 200px;
				margin-right: 0;
				margin-top: 8px;
				position: absolute;
				top: -32px;
				right: 0;
				z-index:1;
				.myshopcars{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 184px;
					height: 144px;
					a{
						height: 36px;
						width: 184px;
						margin-top: 12px;
						margin-bottom: 12px;
						font-size: 14px;
						line-height: 32px;
						border-radius: 18px;
						@include a_block_style;
						@include a_hover_style;
					}
					img{
						position: absolute;
						bottom: 2px;
						left: 2px;
						height: 48px;
						width:180px;
					}
				}/* end myshopcars */
			}/* end last-child */
			
		}/* end li */
	}/* end ul */
}/* end logo */

/* start main_nav */
.main_nav{
	height: 40px;
	.outer{
		>dt{
			position:relative;
			background: #E6E4E2;
			border-radius: 8px 8px 0 0;
			>a{
				@include a_block;
				width: 200px;
				height:40px;
				line-height: 40px;
				font-weight: bold;
				font-size: 16px;
				color: #222222;
				i{
					margin-left: 88px;
				}
				@include a_hover_style;
			}
			/* start classify */
			.pro_classify{
				background: rgba($color: #ffffff, $alpha: 0.6);
				width: 200px;
				height: 400px;
				position: absolute;
				top: 40px;
				left: 0;
				z-index: 10;
				ul{
					>li{
						height: 44px;
						line-height: 44px;
						font-size: 16px;
						text-align: center;
						a{
							i{
								font-size: 28px;
								margin-right: 22px;
							}
							@include a_hover_style;
						}
					}/* end li */
					.classify_manu{
						display: none;
						background: #FFFFFF;
						width: 1000px;
						height: 400px;
						position: absolute;
						top: 0;
						left: 200px;
						overflow: hidden;
						padding: 18px;
						div{
							width: 964px;
							height: 364px;
							overflow-x: hidden;
							p{
								width: 764px;
								heihgt: 24px;
								margin-bottom: 4px;
								a{
									font-size: 14px;
									background: #D88000;
									color: #FFFFFF;
									margin-right: 18px;
									float:left;
									padding: 4px 16px;
								}
							}/* end p */
							dl{
								
								dt{
									width: 64px;
									float: left;
									margin-top: 18px;
									text-align: right;
									font-weight: bold;
									height: 14px;
									line-height: 14px;
									a{
										font-size: 14px;
										@include a_hover_style;
									}
								}/* end dt */
								dd{
									float: left;
									margin-top: 14px;
									a{
										float: left;
										border-right: 1px solid #EEEEEE;
										padding: 0 10px;
										font-size: 14px;
										color: #666666;
										@include a_hover_style;
									}
								}/* end dd */
							}/* end dl */
						}/* end div */
					}/* end classify_manu */
				}/* end ul */
			}/* end pro_classify */
		}/* end dt */
		>dd{
			ul{
				li{
					float: left;
					a{
						@include a_block;
						height: 40px;
						width: 128px;
						font-size: 16px;
						line-height: 40px;
						font-weight: bold;
						@include a_hover_style;
					}
				}
			}
		}/* end dd */
	}
}
/* start carousel */
.carousel{
	position: relative;
	z-index: 5;
	.img_carousel{
		ul{
			li{
				float: left;
				a{
					img{
						width: 100%;
						height: 400px;
					}/* end img */
				}/* end a */
			}/* end li */
		}/* end ul */
		.swiper-scrollbar{
			background: rgba($color: #ffffff, $alpha: 0.5);
			left: 23%;
			bottom: 8px;
			width: 760px;
		}
	}/* end img_carousel */
	.login{
		width: 184px;
		height: 384px;
		background: #FFFFFF;
		margin-top:8px;
		position: absolute;
		top:0;
		right: 65px;
		z-index: 100;
		padding: 8px;
		.welcome{
			div{
				float: left;
				img{
					width: 60px;
					height: 60px;
					border-radius: 50%;
					margin-right: 12px;
				}
				span{
					font-size:14px;
					&:first-child{
						display: blcok;
						margin-bottom: 8px;
						a{
							display: blcok;
							height: 30px;
							color: #000000;
							line-height: 30px;
							
						}
					}
					&:last-child{
						display: blcok;
						a{
							display: block;
							line-height: 30px;
							height: 30px;
							color: #e02613;
						}
					}
				}
			}
		}/* end welcome */
		.log_register{
			margin-top: 12px;
			@mixin border-styles{
				border: 2px solid $red_color;
				border-radius: 20px;
			}
			@mixin a_style {
				width: 80px;
				height: 32px;
				line-height: 28px;
				text-align: center;
				font-size: 14px;
				@include a_block_style;
				@include border-styles;
			}
			a{
				float: left;
			}
			.log{
				@include a_style;
				color: #FFFFFF;
				background: $red_color;
				margin-right: 8px;
			}
			.register{
				@include a_style;
			}
		}/* end log_register */
		.notice{
			.notice1{
				position: relative;
				height: 32px;
				line-height: 32px;
				font-size: 14px;
				color: #666666;
				border-bottom: 1px solid #eeeeee;
				li{
					float: left;
					width:84px;
					height: 32px;
					text-align: center;
					&:last-child{
						height: 3px;
						width: 60px;
						position: absolute;
						bottom: -2px;
						left: 12px;
						background: $red_color;
					}
				}
			}/* end notice1 */
			.notice2{
				position: relative;
				margin: 8px 0;
				width: 152px;
				height: 148px;
				ul{
					&:first-child{
						opacity: 1;
					}
					&:last-child{
						opacity: 0;
					}
					a{
						display: block;
						width: 152px;
						height: 24px;
						line-height: 24px;
						font-size: 12px;
						color: #666666;
						@include single_line_style;
					}
				}
				
			}/* end notice2 */
		}/* end notice */
	}/* end login */
	.mobileyxt{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 184px;
		height: 76px;
		margin-left: 8px;
	}
}

.hotzoneplate{
	$main_color: #e2c46f;
	height: 284px;
	margin: 24px auto;
	.container{
		div{
			float: left;
			width: 392px;
			margin-right: 12px;
			&:last-child{
				margin-right: 0;
			}
			dl{
				width: 392px;
				height: 52px;
				position: relative;
				dt{
					float: left;
					padding: 0 16px;
					margin: 0 0 12px 0;
					height: 32px;
					line-height: 32px;
					font-size: 18px;
					border-radius: 16px;
					color: #FFFFFF;
					background: linear-gradient(to right, $main_color, #ffffff);
					width: 160px;
					
				}/* end dt */
				dd{
					position: absolute;
					top: 0;
					right: 0;
					height: 32px;
					line-height: 32px;
					padding-right: 0px;
					text-align: center;
					a{
						padding: 0 8px;
						font-size: 14px;;
						color: $main_color;
					}
					span{
						color: #eee;
					}
				}/* end dd */
			}/* end dl */
			>a{
				width: 196px;
				float: left;
				position: relative;
				@include a_hover_style;
				img{
					width: 144px;
					height: 144px;
					margin: 20px 26px 10px 26px;
				}
				p{
					width: 160px;
					padding: 4px 18px 0 18px;
					font-size: 14px;
					text-align: center;
					@include single_line_style;
				}
				b{
					display: block;
					width: 160px;
					padding: 4px 18px 0 18px;
					font-size: 12px;
					color: #999999;
					text-align: center;
				}
				
				i{
					width: 40px;
					background: #ff1c5c;
					position: absolute;
					top: 0;
					left: 40%;
					height: 18px;
					line-height: 18px;
					font-size: 14px;
					color: #ffffff;
					text-align: center;
				}
			}/* end >a */
		}/* end div */
	}
	
}/* end hotzoneplate */

/* start screenslide */
.screenslide{
	height: 120px;
	
	.container{
		margin: 36px auto;
		border-radius: 8px;
		overflow: hidden;
		a{
			float: left;
			width: 196px;
			margin-right: 4px;
			&:last-child{
				margin-right: 0;
			}
			overflow:hidden;
		}
	}
}
.absorb-top{
	position: fixed;
	left: 0;
	top:0;
	height: 50px;
	overflow: hidden;
}
.brand{
	ul{
		li{
			a{
				img{
					
				}
			}
		}
	}
	.bandlistleft{
		
	}/* end bandlistleft */
	.bandlistcenter{
		
	}/* end bandlistcenter */
	.bandlistright{
		
	}/* end bandlistright */
}

/* start leftElevator */
.leftElevator{
	height: 216px;
	width: 56px;
	position: fixed;
	top: 50%;
	left: 16px;
	padding: 8px;
	
	ul{
		width: 40px;
		background: #aaaaaa;
		border-radius: 4px;
		cursor: pointer;
		position: relative;
		#slide-box{
			width: 24px;
			height: 24px;
			background: #e02613;
			position: absolute;
			top:0px;
			left: 0;
			color: #FFFFFF;
		}
		li{
			height: 24px;
			width: 24px;
			color: #FFFFFF;
			padding: 8px;
			font-size: 12px;
			text-align: center;
			z-index: 10;
		}
	}
}

.footer{
	height: 480px;
	margin-top: 36px;
	background: #eeeeee;
	position: relative;
	.guarantee{
		position: relative;
		padding-top: 24px;
		height: 72px;
		border-bottom: 1px dotted #999999;
		div{
			float: left;
			width: 340px;
			i{
				font-size: 60px;
				margin-left: 8px;
				margin-right: 12px;
				color: #626682;
				float: left;
			}
			h4{
				margin-top: 8px;
				font-size: 18px;
			}
			p{
				margin-top: 4px;
				font-size: 14px;
				color: #999999;
			}
			&:last-child{
				width: 180px;
				text-align: center;
				h5{
					font-size: 24px;
					color: #626682;
					margin-top: 0;
					font-weight: bold;
				}
				p{
					strong{
						font-weight: bold;
					}
				}
			}
		}
	}/* end gurantee */
	.servcover{
		padding-top: 24px;
		height: 152px;
		border-bottom: 1px dotted #999999;
		dl{
			z-index: 5;
			position: relative;
			width: 200px;
			float: left;
			dt{
				padding-left: 6px;
				font-size: 20px;
				height: 26px;
				line-height: 26px;
				color: #626682;
				margin-bottom: 8px;
			}
			dd{
				a{
					font-size: 14px;
					display: block;
					height: 26px;
					line-height: 26px;
					color: #666666;
					padding-left: 6px;
					&:hover{
						color: #e02613;
						border-left: 3px solid #E02613;
					}
				}
			}
			.Cmap{
				i{
					
					font-size: 176px;
					color: #ddd;
				}
				z-index: -1;
				position: absolute;
				bottom: -35px;
				right: 45px;
			}
		}
	}/* end servcover */
	.setvdataile{
		position: relative;
		padding-top: 24px;
		text-align: center;
		margin-bottom: 20px;
		ul{
			margin-bottom: 18px;
			li{
				display: inline-block;
				a{
					padding: 0 24px;
					font-size: 16px;
					line-height: 16px;
					color: #333333;
					&:hover{
						color: #e02613;
					}
				}
			}
		}
		p{
			font-size: 12px;
			color: #666666;
			line-height: 24px;
			a{
				padding: 0 12px;
				font-size: 12px;
				color: #666666;
			}
			span{
				padding: 0 12px;
			}
		}
	}/* end setvdataile */
	.authentication{
		ul{
			width: 752px;
			height: 38px;
			margin: 0 auto;
			
			li{
				float: left;
				margin-right: 12px;
				border: 1px solid #f8cdc9;
				a{
					img{
						width: 112px;
					}
				}
			}
			.blue{
				border: 1px solid #f8cdc9;
			}
		}
	}
}